<template>
  <div class="page-header">
    <div class="row align-items-center">
      <div class="col">
        <a-space wrap>
          <h2 class="page-title">Tasks</h2>
          <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#issueModal">
            <PlusCircleFilled/>
            新增Task
          </button>
          <button class="btn btn-danger" @click="this.delIssues" v-show="delBtnObj.show">
            <MinusCircleFilled />
            删除Task
          </button>
          <hr>
        </a-space>

<!--        <div class="text-secondary mt-1">1-12 of 241 photos</div>-->
      </div>
      <IssuePrompt></IssuePrompt>
      <div class="col-auto ms-auto d-print-none">
        <div class="d-flex">
          <div class="me-3 d-none d-md-block" >
            <div class="input-icon">
              <input type="text" class="form-control"
                     placeholder="Search…" v-model="localSearchParam" @keyup.enter="searchTasks"/>
              <span class="input-icon-addon">
              <!-- SVG icon from http://tabler-icons.io/i/search -->
<!--              <svg>...</svg>-->
            </span>
            </div>
          </div>
          <button class="btn btn-outline-primary" @click="searchTasks">
            Search Task (Enter)
          </button>
<!--          <a href="#" class="btn btn-primary">-->
<!--            &lt;!&ndash; SVG icon from http://tabler-icons.io/i/plus &ndash;&gt;-->
<!--            <svg>...</svg>-->
<!--            Add photo-->
<!--          </a>-->
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import IssuePrompt from "@/views/issues/IssuePrompt.vue";
import {mapActions, mapGetters} from "vuex";
import EventBus, {DEL_ISSUES_BTN, ISSUES_LIST_INVOKE} from '@/utils/eventBus'
import {batchDelIssue} from "@/api/issues.js";

export default {
  name: "PgHeader2",
  components: {IssuePrompt},
  data(){
    return {
      localSearchParam:'',
      delBtnObj:{
        show:false,
        delIds:[]
      }
    }
  },
  methods:{
    ...mapActions([
      'setSearchParam'
    ]),
    async delIssues() {
      let result = await batchDelIssue(this.delBtnObj.delIds);
      console.log('batch del result:', result)
      if (result.data.code==200){
        if(result.data.data){
          layer.msg('删除成功')
          // this.$refs.table && this.$nextTick(() => {
          //   // 触发表格重新渲染
          //   this.$refs.table.$forceUpdate();
          // });
          location.reload()
        }else{
          layer.msg('删除失败')
        }
      }else{
        layer.msg('删除失败')
      }
    },
    searchTasks(){
      console.log('searchTasks param:',this.localSearchParam)
      this.setSearchParam(this.localSearchParam)
      EventBus.$emit(ISSUES_LIST_INVOKE,this.localSearchParam)
    },
  },
  computed: {
    ...mapGetters([
      'searchParam',
    ])
  },
  mounted() {
    EventBus.$on(DEL_ISSUES_BTN, (param) => {
      console.log('param on delIssuesBtn:', param)
      this.delBtnObj.show=param.show
      this.delBtnObj.delIds=param.delIds
    })
  },
  watch: {
    delBtnObj: function (val) {
      console.log('watch delBtnObj change :', val)
      if (val) {
        this.delBtnObj = val
      }
    },
    localSearchParam: function (val) {
      console.log('watch localSearchParam change size:', val)
      if (val) {
        this.setSearchParam(val)
      }
    }
  },
}
</script>

<style scoped>

</style>
